<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>设备监测</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet"
	href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/Calender.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		
		$('#sect1').blur(function() {
			var sect1 = document.getElementById('sect1').value;
			getSect1(sect1)
		})

		$('#sect').blur(function() {
			var sel = document.getElementById('sect').value;
			setline(sel);
		})

		$('#search').blur(function() {
			var search = document.getElementById('search').value;

			getSearch(search)
		})

		$('#year').blur(function() {
			var year = document.getElementById('year').value;
			getYear(year);
		})

		$('#month').blur(function() {
			var month = document.getElementById("month").value;
			getMonth(month);
		})

		$('#day').blur(function() {
			var day = document.getElementById('day').value;
			getDay(day);
		})

	})

	function getYear(year) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/equip/getYear.action',
			data : 'year=' + year,
			success : function(data) {

			}
		});
	}

	function getMonth(month) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/equip/getMonth.action',
			data : 'month=' + month,
			success : function(data) {

			}
		});
	}

	function getDay(day) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/equip/getDay.action',
			data : 'day=' + day,
			success : function(data) {

			}
		});
	}

	function getSearch(search) {

		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/equip/getSearch.action',
			data : 'search=' + search,
			success : function(data) {

			}
		});
	}

	function getSect1(sect1) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/equip/getSect1.action',
			data : 'sect1=' + sect1,
			success : function(data) {

			}
		});
	}
	function setline(line) {

		$.ajax({
			type : "post",
			url : '${pageContext.request.contextPath}/equip/changeline.action',
			data : "line=" + line,
			success : function(data) {
                  init()
			}
		});
	}
	
	function nextPage(end) {
		
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/nextPage.action',
			data:"end="+end,
			success:function(data){
				
				init()
			}
		});
	}
	
	function lastPage(begin){
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/lastPage.action',
			data:"begin="+begin,
			success:function(data){
				init()
			}
		});
		
	}
	
	
	function init(){
		/* window.location.href="${pageContext.request.contextPath }/equip/getList.action"; */
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath }/equip/getList.action',
			dataType : 'html',
			success : function(data) {
				$("#showContent").html(data);
			}
		});
	}
	
	function getDateLike() {
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/setDateList.action',
			success:function(data){
			    init()
			}
		});
	}
	
	function setList() {
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/setList.action',
			success:function(data){		
				init()
			}
		});
	}
	
	function setIndex() {
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/setIndex.action',
			success:function(data){
				init()
			}
		});
	}
	
	function searchEquip() {
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/searchEquip.action',
			success:function(data){
				init()
			}
		});
	}
	
	function deleteThis(id) {
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/deleteThis.action',
			data:'id='+id,
			success:function(data){
				init()
			}
		});
	}
</script>
<base href="${pageContext.request.contextPath}S">
</head>
<body>

	<div id="showContent">

		<div id="headerType" style="width: 1200px; height: 30px;margin-top: 30px;margin-left: 30px;">
			<button type="button" class="btn btn-success" onclick="setList()"
				style="height: 30px; float: left; width: 120px;">显示全部数据</button>



			<select name="option1" id="sect1" class="form-control"
				style="height: 30px; float: left; width: 150px;">
				<option value="equipId">设备序号</option>
				<option value="equipName">设备名称</option>
			</select> <input type="text" id="search" class="form-control"
				style="height: 30px; float: left; width: 150px;">

			<button type="button" class="btn btn-info" onclick="searchEquip()"
				style="height: 30px; float: left; width: 100px;">提交查询</button>



			<select class="form-control" id="sect"
				style="height: 30px; float: right; width: 100px;margin-right: 50px;">
				<option value="10">10</option>
				<option value="20">20</option>
				<option value="30">30</option>
				<option value="40">40</option>
				<option value="50">50</option>
			</select> <span class="label label-success"
				style="height: 30px; float: right; width: 90px; font-size: 20px; text-align: center;">行数:</span>
		</div>

		<!-- <select name="year" id="year"></select>年 <select name="month"
			id="month"></select>月 <select name="day" id="day"></select>日
		<button type="button" class="btn btn-info" onclick="getDateLike()">提交查询</button> -->


		<div id="showTable"
			style="width: 1000px; margin-top: 40px; margin-left: 100px;">
			<table class="table table-hover">
				<thead>
					<tr>
						<td>ID:</td>
						<td>设备序号</td>
						<td>设备名称</td>
						<td>能耗总值(KWH)</td>
						<td>基准值(KWH)</td>
						<td>当前能耗</td>
						<!-- <td>日期</td> -->
						<!-- <td>操作</td> -->
					</tr>
				</thead>
				<c:forEach items="${equipList}" var="equip" begin="${indexOf}"
					end="${line-1}">
					<tbody>
						<tr>
							<td>${equip.id}</td>
							<td>${equip.equipId}</td>
							<td>${equip.equipName}</td>
							<td>${equip.totalConsum}</td>
							<td>${equip.referValue}</td>
							<td>${equip.currentConsum}</td>
							<%-- <td>${equip.date}</td> --%>
							<%-- <td><a href="equip/updateThis.action?id=${equip.id}">修改</a>

						<button onclick="deleteThis(${equip.id})">删除</button></td> --%>

						</tr>
					</tbody>
				</c:forEach>
			</table>

		</div>
		<div id="footType">
		    <div id="pageType" style="float: right;margin-right: 50px;">
			<ul class="pager">
				<li><a href="javascript:void(0)" onclick="setIndex()">首页</a></li>
				<li><a href="javascript:void(0)" onclick="lastPage(${indexOf})">上一页</a></li>
				<li><a href="javascript:void(0)" onclick="nextPage(${line-1})">下一页</a></li>
			</ul>
			</div>
		</div>
	</div>
	
	
</body>
</html>